<!-- src/components/Header.vue -->
<template>
  <el-header class="header">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <h1>啊嘿的港口堆费系统</h1>
      </el-col>
      <el-col>
        <el-tooltip content="用户信息" placement="bottom">
          <el-avatar
              class="header-avatar"
              :src="userAvatar"
              size="medium"
          ></el-avatar>
        </el-tooltip>
        <span class="header-username">{{ username }}</span>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    username: {
      type: String,
      required: true
    },
    userAvatar: {
      type: String,
      default: 'https://element-plus.gitee.io/images/avatar.png' // 默认用户头像
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #3a4a58;
  color: white;
  padding: 10px 20px;
}

.header-avatar {
  margin-right: 10px;
}

.header-username {
  font-size: 16px;
}
</style>
